<template>
  <div>
    <div class="left-menu">
        <el-row class="tac">
            <el-col :span="96">
                <el-menu
                    background-color="#545c64"
                    default-active=""
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                >
                    <el-submenu v-for="(item, i) in menuList" :key="i" :index="item.id">
                        <template slot="title">
                            <span>{{ item.menu_name }}</span>
                        </template>
                        <el-menu-item-group v-for="(x,t) in item.menu_child_list" :key="t">
                            <el-menu-item @click="childMenu(x.id)" :index="item.id+'-'+x.id">{{x.menu_name}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
    <div class="right-view">
        <span v-show="num==25">
            <UserHome></UserHome>
        </span>
        <span v-show="num==4">
            <UserManage></UserManage>
        </span>
        <span v-show="num==5">
            <RoleManage></RoleManage>
        </span>
        <span v-show="num==6">
            <PermissionManage></PermissionManage>
        </span>
        <span v-show="num==7">
            <MenuManage></MenuManage>
        </span>
        <span v-show="num==8">
            <RankManage></RankManage>
        </span>
        <span v-show="num==9">
            <PostsManage></PostsManage>
        </span>
        <span v-show="num==10">
            <DepartmentManage></DepartmentManage>
        </span>
        <span v-show="num==26">
            <CreateProcess></CreateProcess>
        </span>
        <span v-show="num==27">
            <CreatePoint></CreatePoint>
        </span>
        <span v-show="num==28">
            <CarManage></CarManage>
        </span>
        <span v-show="num==20">
            <SalaryVue></SalaryVue>
        </span>
        <span v-show="num==31">
            <PointStyle></PointStyle>
        </span>
        <span v-show="num==24">
            <MyProcess></MyProcess>
        </span>
        <span v-show="num==32">
            <WorksDeal></WorksDeal>
        </span>
        <span v-show="num==19">
            <MailVue></MailVue>
        </span>
        <span v-show="num==33">
            <MailCope></MailCope>
        </span>
        <span v-show="num==11">
            <LoginLog></LoginLog>
        </span>
    </div>
  </div>
</template>

<script>
import UserHome from './UserHome.vue';
import UserManage from './UserManage.vue';
import RoleManage from './RoleManage.vue';
import PermissionManage from './PermissionManage.vue';
import RankManage from './RankManage.vue';
import PostsManage from './PostsManage.vue';
import DepartmentManage from './DepartmentManage.vue'
import MenuManage from './MenuManage.vue';
import CreateProcess from './CreateProcess.vue';
import CreatePoint from './CreatePoint.vue';
import CarManage from './CarManage.vue';
import SalaryVue from './SalaryVue.vue';
import PointStyle from './PointStyle.vue';
import MyProcess from './MyProcess.vue';
import WorksDeal from './WorksDeal.vue';
import MailVue from './MailVue.vue';
import MailCope from './MailCope.vue';
import LoginLog from './LoginLog.vue'
export default {
    data(){
        return{
            num:25,
            menuList:[]
        }
    },
    mounted(){
        this.allMenu()
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
        
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    allMenu(){
        this.$axios.get('works/api/v1/menus/')
        .then(res=>{
            console.log(res)
            if (res.data.code == 200){
                this.menuList = res.data.menu
            }
        })
    },
    childMenu(id){
        console.log(id)
        this.num=id
    }
    },
    components:{
        UserHome,
        UserManage,
        RoleManage,
        PermissionManage,
        RankManage,
        PostsManage,
        DepartmentManage,
        MenuManage,
        CreateProcess,
        CreatePoint,
        CarManage,
        SalaryVue,
        PointStyle,
        MyProcess,
        WorksDeal,
        MailVue,
        MailCope,
        LoginLog
    }
}
</script>

<style scoped>
.left-menu{
    height: 1000;
    width: 11%;
    float: left;
}
.right-view{
    float: right;
    width: 89%;
    
}
</style>